import { showMessage } from '@/components/antd-comp/message'
import { useEffect, useState } from 'react'
import ReactMarkdown from 'react-markdown'
import { ManualType } from './index'
import './style/content.less'

function Content({ manual }: { manual: ManualType }) {
  const [md, setMd] = useState('')

  useEffect(() => {
    if (manual.content) {
      setMd(manual.content)
    } else {
      fetch(manual.path)
        .then(response => response.text())
        .then(text => setMd(text))
        .catch(error => {
          console.error('Error loading Markdown:', error)
          showMessage({
            content: '使用指南加载失败',
            type: 'error'
          })
        })
    }
  }, [manual])
  return (
    <div className="manual-md-styles">
      <ReactMarkdown children={md}></ReactMarkdown>
    </div>
  )
}
export default Content
